<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>忘记密码</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        #form{
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 600px;
            padding: 5px;
        }
        #getCode{
            margin-top: 20px;
            margin-left: 10px;
            background-color: #3b5167;
            color: white;
            font-size: 15px;
            padding: 5px 30px;
        }
        #forget{
            font-size: 25px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        #tips{
            font-size: 15px;
            color: grey;
        }
        .border{
            margin-top: 20px;
            width:300px ;
            height:25px;
            border: 1px solid #ddd
        }
        #code{
            margin-top: 20px;
            width:150px ;
            height:23px;
            border: 1px solid #ddd
        }
        #push{
            margin-top: 20px;
            background-color: #3b5167;
            color: white;
            font-size: 15px;
            padding: 5px 140px;
        }
        span{
            font-size: 12px;
            color:red;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#top").load("top.html")
        let email = $("#email")
        let code = $("#code")
        let newPwd=$("#newPwd")
        let again=$("#again")
        let emailError = $("#emailError")[0]
        let codeError = $("#codeError")[0]
        let newPwdError=$("#newPwdError")[0]
        let againError=$("#againError")[0]
        let codeBtn=$("#getCode")
        let rightCode

        email.blur(function (){
            //邮箱验证
            const eRegex = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*\.[A-Za-z0-9]{2,}$/;
            let emailInput=email.val()
            if(emailInput===""){
                emailError.innerHTML="邮箱不能为空"
            }else if(!eRegex.test(emailInput)){
                emailError.innerHTML="邮箱格式错误"
            }else{
                emailError.innerHTML=""
            }
        })
        email.focus(function () {
            emailError.innerHTML = ""
        })

        code.blur(function () {
            let codeInput = $("#code").val()
            if (codeInput === "") {
                codeError.innerHTML = "验证码不能为空"
            } else {
                codeError.innerHTML = ""
            }
        })
        code.focus(function () {
            codeError.innerHTML = ""
        })

        newPwd.blur(function () {
            //密码的正则表达式(密码必须至少包含大小写字母+数字 最少六位)
            let pRegex = /\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/;
            let passwordInput = newPwd.val()
            if (passwordInput === "") {
                newPwdError.innerHTML = "密码不能为空"
            } else if (!pRegex.test(passwordInput)) {
                newPwdError.innerHTML = "密码必须至少包含大小写字母+数字 最少六位"
            } else {
                newPwdError.innerHTML = ""
            }
        })
        newPwd.focus(function () {
            newPwdError.innerHTML = ""
        })

        again.blur(function () {
            let againInput = again.val()
            if (againInput === "") {
                againError.innerHTML = "请再次输入密码"
            } else if (againInput!==newPwd.val()) {
                againError.innerHTML = "前后密码不一致"
            } else {
                againError.innerHTML = ""
            }
        })
        again.focus(function () {
            againError.innerHTML = ""
        })

        //获取验证码
        codeBtn.click(function (){
            email.focus()
            email.blur()
            if(emailError.innerHTML===""){
                //向后端发送ajax请求->获取并发送验证码到指定邮箱
                $.ajax({
                    url: "/PDD/user?method=sendCode",
                    type: "post",
                    data: {
                        email:email.val()
                    },
                    success: function (data) {
                        if(JSON.parse(data).code!==1){
                            alert(JSON.parse(data).data)
                            emailError.innerHTML=JSON.parse(data).data;
                        }else{
                            rightCode = JSON.parse(data).data
                            // 发送成功，禁用发生验证码按钮 prop可以设置按钮的是否可点击
                            codeBtn.prop("disabled", true);
                            // 开启倒计时
                            countDown();
                        }
                    },
                    error:function (){
                        alert("验证码获取失败,请稍后再试")
                    }
                })
            }
        })
        // 倒计时变量，初始值为60秒
        let wait = 60;
        // 倒计时函数
        function countDown() {
            if(wait === 0) {
                // 倒计时结束，启用发送验证码按钮，重置倒计时
                codeBtn.prop("disabled", false);
                codeBtn.val("获取验证码");
                wait = 60;
            } else {
                // 倒计时进行中，更新发送验证码按钮
                codeBtn.val(wait + "秒后重新获取");
                wait -= 1;
                // 继续倒计时
                setTimeout(countDown, 1000);
            }
        }

        //给提交按钮绑定点击事件
        $("#push").click(function () {
            //判断验证码是否正确
            if(code.val()!==rightCode){
                codeError.innerHTML="验证码错误"
            }
            //如何知道校验都正确? 错误提示信息都为空
            //如何获取错误提示信息? 失去焦点事件触发->必须先获得焦点才能失去焦点
            email.focus()
            email.blur()
            code.focus()
            code.blur()
            newPwd.focus()
            newPwd.blur()
            again.focus()
            again.blur()

            //判断错误提示信息是否为空
            if (newPwdError.innerHTML === "" && againError.innerHTML === "" && emailError.innerHTML===""
                && codeError.innerHTML === "") {
                //发送ajax请求 提交修改后的数据
                $.ajax({
                    url: "/PDD/user?method=modifyPwd",
                    data: {
                        email:email.val(),
                        newPwd:newPwd.val()
                    },
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if(data.code!==1){
                            alert(data.data)
                        } else{
                            //返回修改成功结果并跳转到登录页面
                            alert(data.data)
                            window.location.href="login.html"
                        }
                    }
                })
            }
        })
    })
</script>
<div id="top"></div>
<form id="form">
    <div id="forget">忘记密码</div>
    <div id="tips">通过邮箱找回密码</div>
    <label for="email"></label><input class="border" type="text" id="email" placeholder="请输入您的邮箱"><span id="emailError"></span><br>
    <label for="code"></label><input  type="text" id="code" placeholder="请输入验证码">
    <input  id="getCode" type="button" value="获取验证码"><span id="codeError"></span><br>
    <label for="newPwd"></label><input class="border" type="text" id="newPwd" placeholder="请输入新密码"><span id="newPwdError"></span><br>
    <label for="again"></label><input class="border" type="text" id="again" placeholder="再次输入新密码"><span id="againError"></span><br>
    <input  id="push" type="button" value="提交">
</form>
</body>
</html>